<template>
  <div ref="cur" class="swiper-container" id="mySwiper">
      <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="carousel in list" :key="carousel.id">
              <img :src="carousel.imgUrl" />
          </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  name:'Carousel',
  props:{
    list:{
      type: Array,
      redirect: true
    }
  },
  watch: {
        list:{
            handler(){
                // nextTick:在下一次dom更新  循环结束后  执行回调函数。在  修改数据后  立即使用此方法
                this.$nextTick(()=>{
                    new Swiper (this.$refs.cur, {
                    direction: 'horizontal', // 垂直切换选项
                    loop: true, // 循环模式选项
                    
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true  // 允许点击分页器跳转
                    },
                    
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    
                    // 如果需要滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },
                    })
                })
            },
            deep: true,
            immediate: true
        }
  }
}
</script>

<style lang="less" scoped>

</style>